<template>
	<view class="address">
		<view class="address-card">
			<uni-card v-if="loin" :is-shadow="false" :border="false" :margin="'0'" :spacing="'0 34rpx'" :padding="0">
				<view class="card">
					<text class="text">头像</text>
					<view class="card-box">
						<!-- 						<view class="img">
							<image :src="data.avatar[0]" style="width: 100%;height: 100%;" @click="imgClick"></image>
						</view> -->
						<view class="img">
							<image :src="data.avatar[0]" style="width: 100%;height: 100%;" @click="imgClick"></image>
						</view>
					</view>
				</view>
				<view class="card">
					<text class="text">姓名</text>
					<view class="card-box">
						<text class="text">{{data.real_name || data.nickname}}</text>
					</view>
				</view>
				<view class="card">
					<text class="text">性别</text>
					<view class="card-box">
						<text class="text">{{['未知','男','女'][data.gender]}}</text>
					</view>
				</view>

				<view class="card">
					<text class="text">手机号</text>
					<view class="card-box">
						<text class="text">{{data.phone || ''}}</text>
					</view>
				</view>
				<!-- 				<view class="card">
					<text class="text">实名认证</text>
					<view class="card-box" @click="renClick">
						<text class="text">{{['未认证','审核中','已认证'][data.cleaner_status]}}</text>
						<uni-icons class="iocn" type="right" color="#999999" size="34r"></uni-icons>
					</view>
				</view> -->
				<view class="card">
					<text class="text">保洁认证</text>
					<view class="card-box" @click="renClick">
						<text class="text">{{['未认证','审核中','已认证'][data.cleaner_status]}}</text>
						<uni-icons class="iocn" type="right" color="#999999" size="34r"></uni-icons>
					</view>
				</view>
				<view class="card" @click="addInfo">
					<text class="text">个人描述</text>
					<view class="card-box">
						<text class="text">{{data.cleaner_des || '请输入个人描述'}}</text>
						<uni-icons class="iocn" type="right" color="#999999" size="34r"></uni-icons>
					</view>
				</view>
				<view class="card" @click="onClick()">
					<text class="text">我的合同</text>
					<view class="card-box">
						<text class="text text1">查看</text>
						<uni-icons class="iocn" type="right" color="#999999" size="34r"></uni-icons>
					</view>
				</view>
			</uni-card>
			<uni-card :is-shadow="false" :border="false" :margin="'24rpx 0 0'" :spacing="'0'" :padding="0">
				<view class="address-but">
					<button class="but" plain @click="offClick">退出登录</button>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {}, // 请求的个人信息
				id: 1, // 父页面进来的方式
				url: '/cleaningAdmin',
				loin:false,
			};
		},
		onLoad(res) {
			this.id = res.id
		},
		onShow() {
			if (this.id == 1) this.getData()
		this.loin =	uni.getStorageSync('cleaningData').loin
		},
		methods: {
			/**
			 * 点击头像触发
			 */
			async imgClick() {
						console.log('88')
				let _this = this
				try {
					let res = await uni.chooseImage()
					uni.showLoading({
						title: "更新头像中....",
						mask: true
					})
					if (res[0] != null) throw new Error(JSON.stringify(res[0]))
					let tempFilePaths = res[1].tempFilePaths;
					let rep = await uni.uploadFile({
						// url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //仅为示例，非真实的接口地址
						url: `${getApp().globalData.url}index/hotelindex/uploadImage`, //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
						},
					})
					if (rep[0] != null) throw new Error(JSON.stringify(rep[0]))
					let avatar = JSON.parse(rep[1].data).file
					let reo = await this.$http.post('/index/Login/update_userinfo', {
						avatar
					})
					uni.hideLoading()
					this.$set(this.data, 'avatar[0]', tempFilePaths[0])
					uni.showToast({
						title: "更新成功"
					})
				} catch (e) {
					uni.hideLoading()
					if (e.message && JSON.parse(e.message)) {
						// 图片取消上传
					} else {
						uni.showToast({
							title: e.errMsg,
							icon: "none"
						})
					}

				}
			},
			/**
			 * 立即认证按钮
			 */
			renClick() {
				let path = this.url + '/my-approve/my-approve'
				if (this.data.cleaner_status === 2) return uni.showToast({
					title: "您已认证通过!",
					icon: "none"
				})
				if (this.data.cleaner_status === 1) return uni.showToast({
					title: "审核中",
					icon: "none"
				})
				if (this.data.cleaner_status === 3) return uni.showToast({
					title: "您的审核被拒绝",
					icon: "none"
				})
				uni.navigateTo({
					url: path
				});
			},
			/**
			 * 性别选项值发生变化时触发
			 * @param {Object} e e.target.value 当前选项的索引
			 */
			// sexChange(e) {
			// 	console.log(e.target.value)
			// 	this.sex = e.target.value;
			// },
			/**
			 * 区域选项 值发生变化时触发
			 * @param {Object} e e.target.value 当前选项的索引
			 */
			// siteChange(e) {
			// 	console.log(e.target.value)
			// 	this.site = e.target.value;
			// },
			/**
			 * 退出按钮
			 */
			async offClick() {
				await uni.showToast({
					title: "退出成功",
					icon: "none",
				})
				try {
					// 清空后台数据 测试用
					await uni.reLaunch({
						url: '/pages/index/index'
					})
					uni.removeStorageSync('cleaningData');
					uni.removeStorageSync('longitude');
					uni.removeStorageSync('latitude');
					uni.removeStorageSync('openid');

				} catch (e) {
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},
			/**
			 *  添加个人描述
			 */
			addInfo() {
				let path = '/cleaningAdmin/profile/info/info'
				uni.navigateTo({
					url: path
				});
			},
			/**
			 * 我的合同
			 */
			onClick() {
				let path = '/cleaningAdmin/profile/pact/pact'
				uni.navigateTo({
					url: path
				});
			},
			/**
			 * 请求数据
			 */
			async getData() {
				try {
					let res = await this.$http.post('/index/Login/userinfo')
					this.data = res
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.address {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;

		.input-placeholder {
			font-size: 24rpx;
			color: rgba($color: #000000, $alpha: 0.5);
		}

		.address-card {
			flex: 1;
			overflow: auto;
			margin-bottom: 20rpx;

			.uni-card {
				overflow: visible;

				.uni-card__header {
					padding: 6rpx 0;
				}

				.card {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
				}

				.card-box {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					overflow: hidden;

					.text {
						flex: 1;
						text-align: right;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.img {
					width: 76rpx;
					height: 76rpx;
					border-radius: 38rpx;
					border: 0;
					overflow: hidden;
				}

				.text {
					line-height: 48rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 20rpx;
				}

				.text1 {
					color: #d8eefc;
				}

				.iocn {
					margin-left: 44rpx;
				}

				.uni-section {
					margin: 0;
				}

				.section {
					width: 220rpx;
					z-index: 999;

					.uni-section-header {
						display: none;
					}
				}
			}
		}

		.address-but {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100rpx;

			.but {
				color: #EF4343;
				font-size: 28rpx;
				border: 0;
			}
		}
	}
</style>
